import React from "react"
import { Routes, Route, Link, Outlet } from "react-router-dom"

import About from "./pages/About"
import Home from "./pages/Home"

export default function App() {
  return (
    <Routes>
      <Route path="/" element={<Layout />}>
        <Route path="about" element={<About />} />
        <Route path="home" element={<Home />} />
        <Route path="*" element={<NoMatch />} />
      </Route>
    </Routes>
  )
}

function Layout(){
  return (
    <>
    <nav>
      <h2>菜单</h2>
      <ul>
        <li><Link to="/about">About</Link></li>
        <li><Link to="/home">Home</Link></li>
      </ul>
    </nav>
    <hr />
    <Outlet />
    </>
  )
}

function NoMatch(){
  return (
    <>
      <p>There's nothing here!</p>
    </>
  )
}